﻿<div class="demo-description">
    <h2>
        <DemoNavLink Link="Menu#MobileHorizontal" />Mobile Horizontal Menu
    </h2>
    <p>The Menu component supports different display modes (the <a class="helplink" target="_blank" href=" https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMenu.DisplayMode" rel="nofollow">DisplayMode</a> property):</p>
    <ul>
        <li>
            <p><strong>Auto</strong> - the menu is adapted to the device type.</p>
        </li>
        <li>
            <p><strong>Desktop</strong> - the menu is shown as a panel with root items. The menu view also depends on the <a class="helplink" target="_blank" href=" https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMenu.Orientation" rel="nofollow">orientation</a>. In the horizontal orientation, child items are available in drop-down menus. In the vertical orientation, submenus with child items are shown to the side of the menu container.</p>
        </li>
        <li>
            <p><strong>Mobile</strong> - the menu has a compact view and depends on the <a class="helplink" target="_blank" href=" https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMenu.Orientation" rel="nofollow">orientation</a>. In the horizontal orientation, it is a hamburger menu. In the vertical orientation, the menu looks like a desktop menu - a panel with root items, but submenus are shown in the main menu container and have the Back button.</p>
        </li>
    </ul>
    <p>This demo demonstrates how to create a horizontal menu for mobile devices.</p>
</div>

<div class="demo-device-container vertical mw-1100">
    <div class="demo-device border border-secondary">
        <div class="demo-display border border-secondary">
            <div class="card demo-card demo-menu-mobile-card">
                <DxMenu Title="DevExpress"
                        Orientation="Orientation.Horizontal"
                        DisplayMode="MenuDisplayMode.Mobile">
                    <Items>
                        <DxMenuItem Text="Home" IconCssClass="menu-icon-home menu-icon">
                            <Items>
                                <DxMenuItem Text="News">
                                    <Items>
                                        <DxMenuItem Text="Explore our newest features" />
                                        <DxMenuItem Text="Website news" />
                                    </Items>
                                </DxMenuItem>
                                <DxMenuItem Text="Our Mission" />
                                <DxMenuItem Text="Our Customers" />
                            </Items>
                        </DxMenuItem>
                        <DxMenuItem Text="Components" IconCssClass="menu-icon-products menu-icon">
                            <Items>
                                <DxMenuItem Text="Blazor" />
                                <DxMenuItem Text="ASP.NET MVC" />
                                <DxMenuItem Text="ASP.NET Web Forms" />
                                <DxMenuItem Text="ASP.NET Core" />
                                <DxMenuItem Text="Bootstrap Web Forms" />
                            </Items>
                        </DxMenuItem>
                        <DxMenuItem Text="Support" IconCssClass="menu-icon-support menu-icon">
                            <Items>
                                <DxMenuItem Text="Getting Started" />
                                <DxMenuItem Text="Documentation" />
                                <DxMenuItem Text="Support Center" />
                                <DxMenuItem Text="Code Examples" />
                                <DxMenuItem Text="Blogs" />
                            </Items>
                        </DxMenuItem>
                    </Items>
                </DxMenu>
            </div>
            <div class="card-body p-3">
                <p class="bg-light p3 m-3"><br></p>
                <p class="bg-light p3 m-3"><br></p>
                <p class="bg-light p3 m-3"><br></p>
            </div>
        </div>
    </div>
</div>
<CodeSnippet_Menu_Mobile_Horizontal />
